<template>
  <div class="divWarehouse divTaskAdd">
    <div class="divHead box">
      <div class="searchForm">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="searchParams"
        >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
                label="上架编号"
                prop="code"
              >
                <el-input
                placeholder="请输入"
                v-model="searchParams.code"
                clearable
                />
              </el-form-item>
            </el-col>
          <el-col :span="6">
            <el-form-item
                label="入库单号"
                prop="receiptCode"
              >
                <el-input
                placeholder="请输入"
                v-model="searchParams.receiptCode"
                clearable
                />
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
                label="货主名称"
                prop="ownerName"
              >
                <el-input
                placeholder="请输入"
                v-model="searchParams.ownerName"
                clearable
                />
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="textRight">
              <base-button
                class="minorImportantButton btnSearch"
                @click="getList"
              >搜索</base-button>
              <base-button class="unimportanceButton" @click="btnResetClick">重置</base-button>
            </div>
          </el-col>
        </el-row>
        </el-form>
      </div>
    </div>
    <div class="divContent box" style="padding-top:20px">
      <div  v-if="tableData.length>0">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#f9f6ee' }"
        >
          <el-table-column
            type="index"
            align="center"
            width="68"
            label="序号"
          />
          <el-table-column
            prop="code"
            align="center"
            label="上架任务编号"
            width="160"
          />
          <el-table-column
            prop="receiptCode"
            align="center"
            label="入库单号"
            width="150"
          />
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
            width="200"
            sortable
          />
          <el-table-column
            prop="ownerName"
            align="center"
            label="货主名称"
            width="160"
            sortable
          />
          <el-table-column
            prop="warehouseName"
            align="center"
            label="仓库名称"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="areaName"
            align="center"
            label="库区名称"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="personName"
            align="center"
            label="负责人"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="上架状态"
            width="160"
            :filter-method="filterHandler"
            :filters="[{text: '待分配', value: 1}, {text: '收货中', value: 2}, {text: '收货完成', value: 3}, {text: '已取消', value: 4}]"
          >
            <template slot-scope="{row}">
              <span v-if="row.status === 1">待分配</span>
              <span v-if="row.status === 2">上架中</span>
              <span v-if="row.status === 3">上架完成</span>
              <span v-if="row.status === 4">已取消</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="planNum"
            align="center"
            label="货品数量"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="realNum"
            align="center"
            label="实收总数"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="groundingNum"
            align="center"
            label="上架数量"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="differenceNum"
            align="center"
            label="差异总数"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="completionTime"
            align="center"
            label="收货完成时间"
            width="200"
            sortable
          />
          <el-table-column label="操作" align="center" width="250" fixed="right">
            <template slot-scope="{row}">
              <base-button class="fontOperateButton" v-if="row.status === 1" @click="btnDistributeClick(row.id)">分配</base-button>
              <base-button class="fontOperateButton" v-if="row.status > 2" @click="btnViewDetail(row.masterId)">查看详情</base-button>
              <base-button class="fontOperateButton" v-if="row.status === 2" @click="btnTaskAddClick(row.masterId)">上架录入</base-button>
              <base-button class="fontOperateButton" v-if="row.status === 2" @click="btnTaskFinishClick([row.id])">上架完成</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
      <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无上架任务</p>
      </div>
      <distribute-user-dialog   :visible="distributeUserDialogData.visible"
                                @handlesubmit="handlesubmit"
                                @handleclose ="distributeUserDialogData.visible = false">
      </distribute-user-dialog>
      <base-dialog    :title="dialogData.title"
                      :visible="dialogData.visible"
                      :msg="dialogData.msg"
                      @btn-cancle-click="dialogData.visible= false"
                      @btn-sure-click ="btnSureClick"
      ></base-dialog>
    </div>
 </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import BasePagination from '@/components/base-pagination/index.vue'
import { ITaskAddTableData } from '@/module-storage-in/interface/task-add'
import { completeTaskAdd, distributeTaskAdd, findTaskAddDetailPaging } from '@/module-storage-in/api/task-add'
import DistributeUserDialog from '@/components/base-allocation/index.vue'
import { ICommonReturn } from '@/utils/common-interface'
import BaseDialog from '@/components/base-dialog/index.vue'

@Component({
  name: 'ManageStorageInTaskReceive',
  components: {
    BaseButton,
    BasePagination,
    DistributeUserDialog,
    BaseDialog
  }
})
export default class extends Vue {
    private tableData: ITaskAddTableData[] = []

    private searchParams = {
      code: '',
      receiptCode: '',
      ownerName: ''
    }

    private paging = {
      current: 1, // 当前页码
      size: 10, // 每页数据量
      total: 0
    }

    private loading = false

    private distributeUserDialogData={
      id: 0,
      visible: false,
      name: ''
    }

    private dialogData = {
      title: '上架完成',
      visible: false,
      msg: '确认上架吗？完成后不能修改上架结果',
      ids: [] as number[]
    }

    @Watch('$route', { immediate: true })
    private onRouteChange() {
      this.initData()
    }

    private initData() {
      this.getList()
    }

    private handleCurrentChange(page:number) {
      this.paging.current = page
      this.getList()
    }

    private handleSizeChange(page:number) {
      this.paging.size = page
      this.paging.current = 1
      this.getList()
    }

    private getParams() {
      const current = this.paging.current
      const size = this.paging.size
      const params = {
        ...this.searchParams,
        current,
        size
      }
      return params
    }

    private async getList() {
      this.loading = true
      const params = this.getParams()
      const { data } = await findTaskAddDetailPaging(params)
      this.loading = false
      this.tableData = data.records
      this.paging.total = parseInt(data.total, 10)
    }

    private btnResetClick() {
      (this.$refs as any).ruleForm.resetFields()
      this.getList()
    }

    private filterHandler(value:any, row:any, column:any) {
      const property = column.property
      return row[property] === value
    }

    private btnDistributeClick(id:number) {
      this.distributeUserDialogData.id = id
      this.distributeUserDialogData.visible = true
    }

    private async handlesubmit() {
      const distributeUserDialogData = this.distributeUserDialogData
      if (!distributeUserDialogData.name) {
        this.$message.error('请选择分配')
      } else {
        const data = ((await distributeTaskAdd({
          id: distributeUserDialogData.id,
          personName: distributeUserDialogData.name
        })) as unknown) as ICommonReturn
        if (data.code === 0) {
          this.$message.success('分配成功')
          this.getList()
          this.distributeUserDialogData.visible = false
        } else {
          this.$message.error(data.msg)
        }
      }
    }

    private btnTaskAddClick(id:number) {
      this.$router.push({ path: `task-add/sure/${id}` })
    }

    private async btnSureClick() {
      const ids = this.dialogData.ids
      const { data } = await completeTaskAdd(ids)
      if (data.errors.length === 0) {
        this.$message.success('上架完成成功')
        this.dialogData.visible = false
        this.getList()
        this.dialogData.ids = []
      } else {
        this.$message.error(data.errors[0])
      }
    }

    private async btnTaskFinishClick(ids:number[]) {
      this.dialogData.ids = ids
      this.dialogData.visible = true
    }

    private btnViewDetail(id:number) {
      this.$router.push({ path: `task-add/sure/${id}/detail` })
    }
}
</script>

<style lang="scss" scoped>
</style>
